/*
 * @Author: liuying 247220246@qq.com
 * @Date: 2025-01-20 14:57:30
 * @LastEditors: liuying 247220246@qq.com
 * @LastEditTime: 2025-01-21 10:33:20
 * @FilePath: \my-book-react\src\bases\grid\grid.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import './styles/grid.scss';
export interface GridProps {
  /** 列数 */
  columns: number;
  /** 格子之间的间距 */
  gap?: number | string | [number | string, number | string];
  children?: React.ReactNode;
}
// const formatGap = (gap: number | string) => {
//   if (typeof gap === 'number') {
//     return `${gap}px`;
//   }
//   return gap;
// };
const formatGap = (gap: string | number) => (typeof gap === 'number' ? `${gap}px` : gap);
const classPrefix = 'ygm-grid';

const Grid: React.FC<GridProps> = (props) => {
  const style = React.useMemo(() => {
    if (props.gap !== undefined) {
      if (Array.isArray(props.gap)) {
        const [gapH, gapV] = props.gap;
        return {
          '--gap-horizontal': formatGap(gapH),
          '--gap-vertical': formatGap(gapV),
          '--columns': props.columns,
        };
      } else {
        // return { '--gap': formatGap(props.gap), '--columns': props.columns };
        return {
          '--gap': formatGap(props.gap),
          '--columns': props.columns,
        };
      }
    }
    return { '--columns': props.columns };
  }, [props.columns, props.gap]);
  return (
    <div className={classPrefix} style={style as React.CSSProperties}>
      {props.children}
    </div>
  );
};
Grid.displayName = 'Grid';
export default Grid;
